<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->

    <a-range-picker :value="dateInterval" format="YYYY-MM-DD" @change="changeDate" />

    <a-button type="primary" style="margin-left: 8px" @click="loadData"> 查询</a-button>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('仓库库存总计信息表')">导出</a-button>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->

      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />批量删除</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown> -->
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="false"
        :loading="loading"
        :scroll="{ x: 1200, y: 900 }"
        class="j-table-force-nowrap"
      >
       <template slot="createUserId_dictText" slot-scope="text, record">
          <a-tooltip placement="top">
            <template slot="title">
              <span>{{ record.createUserId_dictText }}</span>
            </template>
            <span class="ellipsis">
              <a @click="() => handleShow(record.itemList)">{{ record.createUserId_dictText }}</a>
            </span>
          </a-tooltip>
        </template>
      </a-table>
    </div>

    <modal ref="modalForm"></modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import Modal from './modules/Modal'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'CrmWmsInventoryList',
  mixins: [mixinDevice],
  components: {
    Modal,
  },
  data() {
    return {
      description: '用户使用报告',
      queryParam: {},
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
          fixed: 'left',
        },

        {
          title: '销售经理',
          align: 'center',
          dataIndex: 'createUserId_dictText',
          ellipsis: true,
          scopedSlots: { customRender: 'createUserId_dictText' },
        },
        {
          title: '操作次数',
          align: 'center',
          sorter: (a, b) => a.clickQty - b.clickQty,
          dataIndex: 'clickQty',
          ellipsis: true,
        },
        // {
        //   title: '操作',
        //   width: 150,
        //   dataIndex: 'action',
        //   align: 'center',
        //   scopedSlots: { customRender: 'action' },
        //   fixed: 'right',
        // },
      ],
      dataSource: [],
      loading: false,
      dateInterval: [this.startDate(), this.endDate()],
      url: {
        list: '/online/api/listWvVisitLogReport',
        delete: '/online/api/deleteCrmNotice',
        deleteBatch: '/online/api/deleteCrmNoticeBatch',
        exportXlsUrl: '/online/api/exportCrmWmsInventoryXls',
        importExcelUrl: '/online/api/importCrmWmsInventoryExcel',
      },
      dictOptions: {},
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      this.loading = true
      let params = {}
      params.fromDate = this.dateInterval[0]
      params.thruDate = this.dateInterval[1]
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.dataSource = res.result.workMap.dataList
        }
        this.loading = false
      })
    },
    //获取当前日期
    endDate() {
      var myDate = new Date()
      var nowY = myDate.getFullYear()
      var nowM = myDate.getMonth() + 1
      var nowD = myDate.getDate()
      var enddate = nowY + '-' + (nowM < 10 ? '0' + nowM : nowM) + '-' + (nowD < 10 ? '0' + nowD : nowD) //当前日
      return enddate
    },
    //获取三十天前日期
    startDate() {
      var myDate = new Date()
      var lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30) //最后一个数字30可改，30天的意思
      var lastY = lw.getFullYear()
      var lastM = lw.getMonth() + 1
      var lastD = lw.getDate()
      var startdate = lastY + '-' + (lastM < 10 ? '0' + lastM : lastM) + '-' + (lastD < 10 ? '0' + lastD : lastD) //三十天之前日期
      return startdate
    },
    changeDate(date, dateString) {
      if (dateString[0] == '' && dateString[1] == '') {
        this.dateInterval = [this.startDate(), this.endDate()]
      } else {
        this.dateInterval = dateString
      }
    },
    handleShow(data){
      this.$refs.modalForm.show(data)
    }
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
